<template>
  <div class="list">
    <form action="/">
      <van-search placeholder="请输入关键字" v-model="sval" clearable show-action @search="onSearch" @clear="onCancel" style="position:fixed;top:0vh;left:0vw;width:85vw;z-index:1">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <div class="van-search" style="position:fixed;z-index:1;width:15vw;left:85vw;top:0vh;font-size:14px;line-height:34px;background:rgb(255,255,255);" @click="showSearchPopup">高级</div>
      <van-popup v-model="searchshow" closeable close-icon-position="top-left" position="right" :style="{ width: '80vw', height: '100vh' }">
        <div style="padding-top:5vh;padding-left:1vw;padding-right:1vw;">
          <form>
            <van-field clearable v-for="condition in conditiondata" :key="condition.viewcondition_id" v-model="condition.viewcondition_value" :label="condition.viewcondition_title" />
            <!-- 不能使用van-button -->
            <input type="button" style="margin:5px;" class="van-button van-button--info van-button--small" value="查询" @click="query" />
            <input type="button" style="margin:5px;" class="van-button van-button--default van-button--small" value="清空" @click="clearquery" />
          </form>
        </div>
      </van-popup>
    </form>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="margin-top:8vh;margin-bottom:8vh;">
      <van-list v-model="loading" :finished="finished" finished-text="已加载全部数据" @load="onLoad">
        <van-swipe-cell v-for="item in list" :key="item.id">
          <template slot="left">
            <van-button v-if="item[idobject + '_billstatus'] === '' || item[idobject + '_billstatus'] === '40282e81535903f901535938d3be0748'" class="swipe-button" square type="info" text="提交" @click="submit(item[idobject + '_id'])" />
            <van-button v-else class="swipe-button" square disabled type="info" text="提交" @click="submit(item[idobject + '_id'])" />
            <van-button v-if="item[idobject + '_billstatus'] === '' || item[idobject + '_billstatus'] === '40282e81535903f901535938d3be0748'" class="swipe-button" square type="primary" text="编辑" @click="edit(item[idobject + '_id'])" />
            <van-button v-else class="swipe-button" square disabled type="primary" text="编辑" @click="edit(item[idobject + '_id'])" />
          </template>
          <van-cell :title="item.title" :value="item.value" :label="item.label" @click="openCard(item[idobject + '_id'])" />
          <template slot="right">
            <van-button v-if="item[idobject + '_billstatus'] === '' || item[idobject + '_billstatus'] === '40282e81535903f901535938d3be0748'" class="swipe-button" square type="danger" text="删除" @click="del(item[idobject + '_id'])" />
            <van-button v-else class="swipe-button" square disabled type="danger" text="删除" @click="del(item[idobject + '_id'])" />
          </template>
        </van-swipe-cell>
      </van-list>
    </van-pull-refresh>
    <van-tabbar v-model="active">
      <van-tabbar-item @click="showPopup">新增</van-tabbar-item>
    </van-tabbar>
    <van-popup v-model="show" position="bottom" :style="{ height: '25%' }">
      <van-cell clickable to="new" :title="'参照商业配送协议'" />
      <van-cell clickable to="new" :title="'参照代理推广协议'" />
      <van-cell clickable @click="openNew" :title="'新增'" />
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { Search, List, Cell, PullRefresh, Toast, Tabbar, TabbarItem, Popup, Icon, SwipeCell, Dialog } from 'vant'
import qs from 'qs'
Vue.use(Search).use(List).use(Cell).use(PullRefresh).use(Toast).use(Tabbar).use(TabbarItem).use(Popup).use(Icon).use(SwipeCell).use(Dialog)
export default {
  name: 'list',
  data () {
    return {
      idobject: this.$route.query.idobject,
      sval: '',
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      active: 0,
      startline: 1,
      pagecount: 20,
      show: false,
      searchshow: false,
      conditiondata: []
    }
  },
  methods: {
    onLoad () {
      let data = {
        'startline': this.startline,
        'pagecount': this.pagecount,
        'condition': this.sval
      }
      for (let i = 0; i < this.conditiondata.length; i++) {
        data[i + '_viewcondition_field'] = this.conditiondata[i].viewcondition_field
        data[i + '_viewcondition_relfield'] = this.conditiondata[i].viewcondition_relfield
        data[i + '_viewcondition_value'] = this.conditiondata[i].viewcondition_value
        data[i + '_viewcondition_comparison'] = this.conditiondata[i].viewcondition_comparison
        data[i + '_viewcondition_object'] = this.conditiondata[i].viewcondition_object
      }
      this.axios({
        method: 'post',
        url: '/api/' + this.idobject + '.list.do',
        data: qs.stringify(data)
      }).then(res => {
        //console.log('xxx:' + res)
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          let rsdata = res.data.jsondata.fieldValue
          for (let i = 0; i < rsdata.length; i++) {
            this.list.push(rsdata[i])
          }
          if (rsdata == null || rsdata.length === 0 || rsdata.length < this.pagecount) {
            this.loading = false
            this.finished = true
          } else {
            this.startline = this.startline + rsdata.length
            this.loading = false
          }
        }
      }).catch(res => {
        this.reserror(res)
      })
    },
    onRefresh () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.isLoading = false
      this.onLoad()
    },
    onSearch () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    onCancel () {
      this.sval = ''
    },
    showPopup () {
      this.show = true
    },
    showSearchPopup () {
      if (this.conditiondata.length === 0) {
        let data = {}
        this.axios({
          method: 'post',
          url: '/api/' + this.idobject + '.query.do',
          data: qs.stringify(data)
        }).then(res => {
          if (res.data.flag === '1') {
            Toast(res.data.des)
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          } else {
            //console.log(res)
            this.conditiondata = res.data.jsondata
            this.searchshow = true
          }
        }).catch(res => {
          this.reserror(res)
        })
      } else {
        this.searchshow = true
      }
    },
    query () {
      this.list = []
      this.startline = 1
      this.finished = false
      this.loading = true
      this.searchshow = false
      this.onLoad()
    },
    clearquery () {
      for (let i = 0; i < this.conditiondata.length; i++) {
        this.conditiondata[i].viewcondition_value = ''
      }
      // this.searchshow = false
    },
    openNew () {
      this.$router.push({ name: 'new', query: { idobject: this.idobject } })
    },
    openCard (itemid) {
      this.$router.push({ name: 'card', query: { itemid: itemid, idobject: this.idobject } })
    },
    edit (itemid) {
      this.$router.push({ name: 'edit', query: { itemid: itemid, idobject: this.idobject } })
    },
    submit (itemid) {
      let data = { [this.idobject + '_id']: itemid }
      this.axios({
        method: 'post',
        url: '/api/' + this.idobject + '.flowsubmit.do',
        data: qs.stringify(data)
      }).then(res => {
        if (res.data.flag === '1') {
          Toast(res.data.des)
          if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
            this.loginout()
          }
        } else {
          Toast(res.data.des + ' ')
          // 刷新列表
          this.onRefresh()
        }
      }).catch(res => {
        this.reserror(res)
      })
    },
    del (itemid) {
      Dialog.confirm({
        title: '删除',
        message: '确认删除吗？'
      }).then(() => {
        // on confirm
        let data = { [this.idobject + '_id']: itemid }
        this.axios({
          method: 'post',
          url: '/api/' + this.idobject + '.del.do',
          data: qs.stringify(data)
        }).then(res => {
          if (res.data.flag === '1') {
            Toast(res.data.des)
            if (res.data.des && res.data.des.indexOf('登录过期') >= 0) {
              this.loginout()
            }
          } else {
            Toast('删除成功')
            // 此处应该带着条件刷新列表
            this.onRefresh()
          }
        }).catch(res => {
          this.reserror(res)
        })
      }).catch(() => {
        // on cancel
      })
    }
  }
}
</script>

<style scoped lang="scss">
.swipe-button {
  height: 100%;
}
</style>
